<template>
	<!-- 游戏结果页 -->
	<view class="result">
		<view class="navbar" :style="navbarStyle">
			<navigator url="/pages/index/index" open-type="reLaunch">
				<image class="back" src="../../static/img/home.png"/>
			</navigator>
		</view>

		<eval-result :data="info" :personInfo="personInfo" v-if="info"></eval-result>

		<view class="recommend">
			<view class="recommendTop">
				<view class="recommendImg"></view>
				<view class="recommendText">本产品仅供娱乐</view>
			</view>
			<view class="recommendMain">
				<navigator class="hot-item" :url="`/pages/start/start?id=${item.Id}&typeId=${item.typeId}`" v-for="(item, index) in list" :key="index">
					<view class="icon">
						<image :src="item.ImgUrl"></image>
					</view>
					<view class="content">
						<view class="title">{{item.Title}}</view>
						<view class="subtitle">{{item.Descrption}}</view>
					</view>
					<view class="goTest">立即测试</view>
					<image class="btn" src="../../static/img/ceshi.png"></image>
				</navigator>
			</view>
			<view style="height:25px;"></view>
		</view>
	</view>
</template>

<script>
	import EvalResult from '@/components/EvalResult/index.vue'
	export default {
		components: {
			EvalResult
		},
		data() {
			return {
				// list: [{
				// 	ImgUrl: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-65181631878191958.jpg',
				// 	Title: '你来人间是为了什么',
				// 	Descrption: '你来人间的真实目的是什么？',
				// 	Id: '125',
				// 	typeId: '2',
				// }, {
				// 	ImgUrl: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-76861631869883119.jpg',
				// 	Title: '你和哪个古代武将最像？',
				// 	Descrption: '安得猛士兮守四方，你最像哪个古代武将？',
				// 	Id: '124',
				// 	typeId: '2',
				// }, ],
				list: [],
				params: {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					recommended: '1',
					goodsId: ''
				},
				dataList: [],
				barHeight: 0,
				info: null,
				personInfo: [],
				template: ''
			}
		},
		methods: {
			async fetch() {
				const globalData = getApp().globalData
				this.barHeight = globalData.barHeight
				var info = globalData.gameInfo
				console.log(info)
				this.dataList = info

				if(info.xzId != 'undefined') { // 星座判断
					console.log('星座题', info.num);
					info.num = info.num + Number(info.xzId)
					console.log(info.num);
				} // 星座判断
				if (info.sex == '1') {
					info.num = info.num + 100
				}
				let typeId = info.typeId
				let answerRes = info.answerRes
				const result = await this.request({
					url: '/GetResult.ashx',
					loading: true,
					data: {
						id: info.Id,
						r: info.num,
						answerRes: info.answerRes,
						typeId: info.typeId,
					}
				})
				console.log("result==", JSON.stringify(result))
				this.info = result
				this.info.typeId = typeId
				this.info.answerRes = answerRes
				console.log(this.info)
				// console.log('xxxxxxxxx',this.queryObj.template)
				let xxx = this.queryObj.template
				this.info.template = xxx
				// console.log('xxxxxxxxxxxxxxx', this.info)
			},
			async birthdayFetch() {
				const globalData = getApp().globalData
				this.barHeight = globalData.barHeight
				var info = globalData.gameInfo
				await uni.request({
					// url: 'http://192.168.1.199:9099/job_feign/get_ce_shi_birthday',
					url: 'https://vs.tuiwa.com/job_feign/get_ce_shi_birthday',
					method: 'GET',
					data: {
						appId: 'ttb2dfc4622de58bd4',
						birthday: info.birthdayDate,
					},
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						console.log(res.data.data, info)
						this.personInfo = res.data.data
						this.info = info
						// let { aihao, date, diqu, touxiang, xingge, xingming, zhishu, zhiye } = res.data.data;
						// console.log(aihao, date, diqu, touxiang, xingge, xingming, zhishu, zhiye);
						// console.log(this.info);
					}
				});

				// console.log("result==", JSON.stringify(result))
				// this.info = result
			},
			async getResultForBirth() {
				const globalData = getApp().globalData
				this.barHeight = globalData.barHeight
				var info = globalData.gameInfo
				await uni.request({
					// url: 'http://192.168.1.222:9099/job_feign/get_result_for_birth',
					url: 'https://vs.tuiwa.com/job_feign/get_result_for_birth',
					method: 'GET',
					data: {
						birthday: info.birthdayDate,
					},
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						console.log(res.data.data, info)
						this.personInfo = res.data.data
						this.info = info
						// console.log(this.info);
					}
				});

				// console.log("result==", JSON.stringify(result))
				// this.info = result
			},
			async getList() {
				// console.log(this.dataList.Id);
				let params = {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					recommended: '1',
					goodsId: this.dataList.Id
				};
				await this.request({
					url: '/GetList.ashx', 
					data: params
				}).then(res => {
					// console.log(res);
					this.list = res
					// console.log('this.list', this.list);
				})
			}
		},
		computed: {
			navbarStyle() {
				return `height: ${40 + this.barHeight}px; padding-top: ${this.barHeight}px`
			}
		},
		onLoad(options) {
			let globalData = getApp().globalData
			// console.log(globalData.gameInfo);
			// console.log(options);
			// console.log(options.birthdayDate);
			if(globalData.gameInfo.typeId == 17) {
				// console.log('birthday');
				this.birthdayFetch()
			}else if(globalData.gameInfo.typeId == 26) {
				// console.log('你来这个世界多久了');
				this.getResultForBirth();
			} else {
				this.fetch()
			}
			this.getList()
			this.queryObj = options
			// console.log('xxxxxxxxx',this.queryObj.template)
			// this.template = this.queryObj.template
			// info = this.info
			// console.log('111', info)
		}
	}
</script>

<style lang="scss" scoped>
	.result {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;

		.navbar {
			position: fixed;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			z-index: 5;
		}
	}
	.back {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}
	.recommend {
		width: 100%;
		// height: 200rpx;
		border-radius: 38rpx 38rpx 0 0;
		border-top: 4rpx solid #9B58ED;
		background: #fff;
		transform: translateY(-30rpx);
	}
	.recommendTop {
		height: 114rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 5%;
	}
	.recommendImg {
		width: 199rpx;
		height: 38rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-39101632472449871.png) no-repeat;
		background-size: 100% 100%;
	}
	.recommendImg image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.recommendText {
		color: #999;
		font-size: 12px;
	}
	.hot {
		&-title {
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			font-size: 36rpx;
			line-height: 1;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			text {
				color: #FFFFFF;
			}

		}

		&-item {
			display: flex;
			padding: 15rpx 48rpx 15rpx 48rpx;
			height: 190rpx;
			width: 750rpx;
			background-image: url(../../static/img/card_bg.png);
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			// margin-top: 20rpx;
			position: relative;

			&:first-child {
				margin-top: 0;
			}

			.icon {
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
				border: 1px solid #9B58ED;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 24rpx;
				// margin-left: -40rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.content {
				flex: 1;
				margin-top: 20rpx;

				.title {
					color: #000;
					font-weight: bold;
					font-size: 30rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 350rpx;
				}

				.subtitle {
					color: #787878;
					font-size: 24rpx;
					line-height: 34rpx;
					width: 350rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.goTest {
				border-radius: 20rpx;
				height: 50rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				font-size: 24rpx;
				padding: 8rpx 20rpx 5rpx 20rpx;
				z-index: 10;
				color: #86582A;
				font-weight: bold;
			}

			.btn {
				width: 140rpx;
				height: 48rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				z-index: 9;
			}
		}
	}
</style>
